<template>
    <div>
      <el-card>
        <el-row :gutter="6">
          <el-col :span="8">
            <el-card class="clickClass">
              <el-row>
                <el-col :span="16">
                  <b>姓名：</b>{{student.name}}
                  <br/>
                  <br/>
                  <b>班级：</b>{{student.majorName + '-' + student.className}}
                  <br/>
                  <br/>
                  <b>性别：</b>{{student.gender === '1' ? '男' : '女'}}
                </el-col>
                <el-col :span="8">
                  <img src="../assets/gdm/student_boy.png" @click="setGuideId">
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="14" :offset="2">
            <el-card  v-if="guideId">
              <div v-if="address.length > raddress.length">
                <el-row>
                  <el-col :span="12">
                    <div style="padding: 1%">
                      <b>最近提交时间：</b>{{times[times.length - 1]}}
                      <br/><br/>
                      <b>论文下载：</b><el-button type="primary" size="mini" @click="downFile(address[address.length - 1])">下载</el-button>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <b>提交批注版</b>
                    </el-row>
                    <el-row>
                      <el-upload
                        drag
                        action="http://localhost:10000/api/thirdparty/oss"
                        :on-success="handleFileSuccess"
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">上传批注论文之前，请检查好是否为最新版</div>
                      </el-upload>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div v-else>
                <el-row>
                  <el-col :span="24" align="middle">
                    <h3>已完成该学生的所有批注</h3>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
</template>

<script>
    import {mixin} from "../mixins";
    import {mapGetters} from 'vuex'
    import {selectProjectByGuide, selectStudentByTeacherId, updateProjectByTeacher} from "../api/gdm";

    export default {
      name: "GDM",
      mixins: [mixin],
      computed:{
        ...mapGetters([
          "teacherId"
        ])
      },
      data(){
        return{
          student: {},
          guideInfo: {
            id: '',
            projectName: ''
          },
          projectInfo: {},
          guideId: '',
          address: [],
          raddress: [],
          times: []
        }
      },
      created() {
        this.init()
      },
      methods:{
        init(){
          selectStudentByTeacherId(this.teacherId).then(({data}) => {
            if(data.code === 0){
              this.student = data.guideVo.student
              this.guideInfo.id = data.guideVo.id
              this.guideInfo.projectName = data.guideVo.projectName
            }else{
              this.notify("初始化错误，请稍后再试", "error")
            }
          }).catch(err => {
            console.error(err)
            this.notify("初始化错误，请稍后再试", "error")
          })
        },
        downFile(url){
          console.log(url)
          window.open(url)
        },
        setGuideId(){
          this.guideId = this.guideInfo.id
          selectProjectByGuide(this.guideId).then(({data}) => {
            if(data.code === 0){
              this.projectInfo = data.projects
              this.address = data.projects.addresses.split(",")
              this.raddress = data.projects.raddresses.split(",")
              this.times = data.projects.times.split(",")
            }else{
              this.notify("查询失败,请稍后再试", "error")
            }
          }).catch(err => {
            this.notify("查询失败,请稍后再试", "error")
            console.error(err)
          })
        },
        handleFileSuccess(res, file){
          console.log(res.url)
          updateProjectByTeacher(this.guideId, res.url).then(({data}) => {
            if(data.code === 0){
              this.notify("上传成功", "success")
              this.init();
              this.setGuideId()
            }else{
              this.notify("上传出错了，请稍后再试", "error")
            }
          }).catch(err => {
            console.error(err)
            this.notify("上传出错了，请稍后再试", "error")
          })
        }
      }
    }
</script>

<style scoped>
.clickClass{
  cursor: pointer;
}
</style>
